<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<script src='js/jquery.js'></script>
	<script src="js/GetCNDate.js"></script>
	<script src="js/Function.js"></script>
    <title>梅花易数</title>
	<link href="css/CHCStyle.css" rel="stylesheet" />
    <script type="text/javascript">
   		$(function() {
   		
   		    UpdateDateTime();
			setInterval(function(){UpdateDateTime();},30000);

   		})
		
		function UpdateDateTime ()
		{
			var myDate = new Date;
			var year = myDate.getFullYear(); //获取当前年
			var mon = myDate.getMonth() + 1; //获取当前月
			var date = myDate.getDate(); //获取当前日
			var h = myDate.getHours();//获取当前小时数(0-23)
			var m = myDate.getMinutes();//获取当前分钟数(0-59)
			var s = myDate.getSeconds();//获取当前秒
			var week = myDate.getDay();
			var weeks = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
			//console.log(year, mon, date, weeks[week],h,m,s)
			$("#time").html(year + "年" + mon + "月" + date + "日 " + weeks[week]);
			
			var Hour = myDate.getHours(); //获取当前小时数(0-23)
			var CNTime = " " ;
			if(parseInt(Hour)>=23 || parseInt(Hour)<1 ) {CNTime="子时"}
			if(parseInt(Hour)>=1 && parseInt(Hour)<3) {CNTime="丑时"}
			if(parseInt(Hour)>=3 && parseInt(Hour)<5) {CNTime="寅时"}
			if(parseInt(Hour)>=5 && parseInt(Hour)<7) {CNTime="卯时"}
			if(parseInt(Hour)>=7 && parseInt(Hour)<9) {CNTime="辰时"}
			if(parseInt(Hour)>=9 && parseInt(Hour)<11) {CNTime="巳时"}
			if(parseInt(Hour)>=11 && parseInt(Hour)<13 ) {CNTime="午时"}
			if(parseInt(Hour)>=13 && parseInt(Hour)<15 ) {CNTime= "未时"}
			if(parseInt(Hour)>=15 && parseInt(Hour)<17 ) {CNTime="申时"}
			if(parseInt(Hour)>=17 && parseInt(Hour)<19 ) {CNTime="酉时"}
			if(parseInt(Hour)>=19 && parseInt(Hour)<21) {CNTime="戌时"}
			if(parseInt(Hour)>=21 && parseInt(Hour)<23) {CNTime="亥时"}
			$("#Span_CNTime").html(CNTime);
			
			$("#Span_CNDate").html(GetLunarDay(year, mon, date) );
		}
    </script>
	

</head>
<body>
	<div class="div_title" style="border-radius: 0px;">梅花易数</div>
	<div style="width:100%;margin:0 auto;text-align: center; background-color:#CCFFFF;line-height:30px;">
	    <span id="time"></span>
		<span id="Span_CNDate"></span>
		<span id="Span_CNTime"></span>
		<input type="button" id="Btn_temp" style="display: none;" />
	</div>
	<div style="height:10px;"></div>
	<div style="width: 100%;text-align: center;">
		<input type="number" id="sg" autocomplete="off" class="input_txt2" style="width:30%;" maxlength="5" placeholder="输入上挂数">
		<input type="number" id="xg" autocomplete="off" class="input_txt2" style="width:30%;" maxlength="5" placeholder="输入下挂数">
		<input type="number" id="dy" autocomplete="off" class="input_txt2" style="width:30%;" maxlength="5" placeholder="输入动爻数">
		<div>
			<input type="button" class="btn2 btn_Start" style="width: 25%;" value="起卦"/>
			<input type="button" class="btn btn_Clear" style="width: 25%;" value="清空"/>
		</div>
	</div>
	
	<div class="Div_Result">
	</div>
	<div style="height:10px;"></div>
	<div id="div_GuaTu" style="display: grid;grid-template-columns: 1fr 1fr 1fr ;align-items: center;text-align: center;margin: 0 auto;width: 95%;">
		<div id="GuaTu1"></div>
		<div id="GuaTu2"></div>
		<div id="GuaTu3"></div>
	</div>
	
	<div id="div_GuaMing" style="display: grid;grid-template-columns: 1fr 1fr 1fr ;align-items: center;text-align: center;margin: 0 auto;width: 95%;">
		<div id="GuaMing_1"></div>
		<div id="GuaMing_2"></div>
		<div id="GuaMing_3"></div>
	</div>
	<div style="height:10px;"></div>
	<div id="BenGuaYaoCi" style="font-size: 10px;color:#808080;width: 95%;margin: 0 auto;"> 
		
	</div>
	
	<footer style="margin: 0 auto;width: 95%;text-align: center;line-height: 25px;color:#A9A9A9">
		<div class="div_line1"></div>
		制作者: 徐广皓 alanxua@msn.com  QQ:893992081
	</footer>
</body>

<script>
	$(function(){
		$(".btn_Clear").click(function(){
			$("#sg").val("");
			$("#xg").val("");
			$("#dy").val("");
			$(".Div_Result").html("");
			window.location.href="index.html";
		})
		
		$(document).on("click",".btn_Start",function(){
			var sg = $("#sg").val().trim();
			var xg = $("#xg").val().trim();
			var dy = $("#dy").val().trim();
			if($.isNumeric(sg) && $.isNumeric(xg) && $.isNumeric(dy)){		    
				var yang = "<img src='img/1.png' style='border:0px;width:60px;' />";
				var ying = "<img src='img/0.png' style='border:0px;width:60px;' />";
				
				//乾一、兑二、离三、震四、巽五、坎六、艮七、坤八
				var Gua_1 = yang+"<br/>"+yang+"<br/>"+yang+"<br/>"; 
				var Gua_2 = ying+"<br/>"+yang+"<br/>"+yang+"<br/>"; 
				var Gua_3 = yang+"<br/>"+ying+"<br/>"+yang+"<br/>"; 
				var Gua_4 = ying+"<br/>"+ying+"<br/>"+yang+"<br/>"; 
				var Gua_5 = yang+"<br/>"+yang+"<br/>"+ying+"<br/>"; 
				var Gua_6 = ying+"<br/>"+yang+"<br/>"+ying+"<br/>"; 
				var Gua_7 = yang+"<br/>"+ying+"<br/>"+ying+"<br/>"; 
				var Gua_8 = ying+"<br/>"+ying+"<br/>"+ying+"<br/>"; 
				var Gua_Array = new Array();
				Gua_Array[0]="0";
				Gua_Array[1]=Gua_1;
				Gua_Array[2]=Gua_2;
				Gua_Array[3]=Gua_3;
				Gua_Array[4]=Gua_4;
				Gua_Array[5]=Gua_5;
				Gua_Array[6]=Gua_6;
				Gua_Array[7]=Gua_7;
				Gua_Array[8]=Gua_8;
				
				//开始生成本卦；
				if(parseInt(sg)>8) 
				{
					if((parseInt(sg) % 8)>0)
					   {  sg=parseInt(sg) % 8; }
					else
					   {  sg=parseInt(sg)/8  }
				}
				
				sg=QuYuShu(sg,8);
				// console.log("sg:"+sg);
				xg=QuYuShu(xg,8);
				// console.log("xg:"+xg);
				dy=QuYuShu(dy,6);				
				// console.log("dy:"+dy);
				var GuaMing1 = GuaMingZi(sg+""+xg);
				$("#BenGuaYaoCi").html(GuaMing1+"<br/>");
			    $("#BenGuaYaoCi").append(YaoCiContent(sg+""+xg));
				BenGua=Gua_Array[sg] + Gua_Array[xg];
				$("#GuaTu1").html(BenGua);
				$("#GuaMing_1").html(GuaMing1+"<br/>");
				$("#GuaMing_1").append("上:"+WuXinName(sg)+"<br/>");
				$("#GuaMing_1").append("下:"+WuXinName(xg)+"<br/>");
				
				//开始生成中间的互卦
				
				var temp1 = Gua_Array[sg].split("<br/>");
				var temp2 = Gua_Array[xg].split("<br/>");
				var HuGuaSG = temp1[1]+"<br/>"+temp1[2]+"<br/>"+temp2[0]+"<br/>";
				var HuGuaXG = temp1[2]+"<br/>"+temp2[0]+"<br/>"+temp2[1]+"<br/>";
				var HuGuaSG_Shu="0";
				var HuGuaXG_Shu="0";
				$("#GuaTu2").html(temp1[1]+"<br/>");
				$("#GuaTu2").append(temp1[2]+"<br/>");
				$("#GuaTu2").append(temp2[0]+"<br/>");
				$("#GuaTu2").append(temp1[2]+"<br/>");
				$("#GuaTu2").append(temp2[0]+"<br/>");
				$("#GuaTu2").append(temp2[1]+"<br/>");
				
				
				for(i=0 ;i <=8 ;i ++)
				{
					if(HuGuaSG==Gua_Array[i])
					{
						HuGuaSG_Shu=i;
					}
				}
				
				for(i=0 ;i <=8 ;i ++)
				{
					if(HuGuaXG==Gua_Array[i])
					{
						HuGuaXG_Shu=i;
					}
				}
				var GuaMing2 = GuaMingZi(HuGuaSG_Shu + "" + HuGuaXG_Shu);
				$("#GuaMing_2").html(GuaMing2+"<br/>");
				$("#GuaMing_2").append("上:"+WuXinName(HuGuaSG_Shu)+"<br/>");
				$("#GuaMing_2").append("下:"+WuXinName(HuGuaXG_Shu)+"<br/>");
				$("#BenGuaYaoCi").append("<div class='div_line1'></div>"+GuaMing2+"<br/>");
				$("#BenGuaYaoCi").append(YaoCiContent(HuGuaSG_Shu + "" + HuGuaXG_Shu));
				
				//开始生成变卦
				var temp3 = BenGua.split("<br/>");
				
				if(dy==1) { temp3[5]=ReplaceYao(temp3[5]) ;}
				if(dy==2) { temp3[4]=ReplaceYao(temp3[4]) ;}
				if(dy==3) { temp3[3]=ReplaceYao(temp3[3]) ;}
				if(dy==4) { temp3[2]=ReplaceYao(temp3[2]) ;}
				if(dy==5) { temp3[1]=ReplaceYao(temp3[1]) ;}
				if(dy==6) { temp3[0]=ReplaceYao(temp3[0]) ;}
				
				var BianGuaSG = temp3[0]+"<br/>"+temp3[1]+"<br/>"+temp3[2]+"<br/>";
				var BianGuaXG = temp3[3]+"<br/>"+temp3[4]+"<br/>"+temp3[5]+"<br/>";
				var BianGuaSG_Shu="0";
				var BianGuaXG_Shu="0";
				
				$("#GuaTu3").html(temp3[0]+"<br/>");
				$("#GuaTu3").append(temp3[1]+"<br/>");
				$("#GuaTu3").append(temp3[2]+"<br/>");
				$("#GuaTu3").append(temp3[3]+"<br/>");
				$("#GuaTu3").append(temp3[4]+"<br/>");
				$("#GuaTu3").append(temp3[5]+"<br/>");
				
				for(i=0 ;i <=8 ;i ++)
				{
					if(BianGuaSG==Gua_Array[i])
					{
						BianGuaSG_Shu=i;
					}
				}
				
				for(i=0 ;i <=8 ;i ++)
				{
					if(BianGuaXG==Gua_Array[i])
					{
						BianGuaXG_Shu=i;
					}
				}
				var GuaMing3 = GuaMingZi(BianGuaSG_Shu + "" + BianGuaXG_Shu);
				$("#GuaMing_3").html(GuaMing3+"<br/>");
				$("#GuaMing_3").append("上:"+WuXinName(BianGuaSG_Shu)+"<br/>");
				$("#GuaMing_3").append("下:"+WuXinName(BianGuaXG_Shu)+"<br/>");
				$("#BenGuaYaoCi").append("<div class='div_line1'></div>"+GuaMing3+"<br/>");
				$("#BenGuaYaoCi").append(YaoCiContent(BianGuaSG_Shu + "" + BianGuaXG_Shu));
				$(".Div_Result").html("<div style='text-align:center' id='div_dy'>动爻数："+dy+"</div>");
				if(parseInt(dy)<4) 
				{
					$("#div_dy").append("<br/>上为体 下为用")
				}
				else
				{
					$("#div_dy").append("<br/>上为用 下为体")
				}
				
			}
			else
			{
				$(".Div_Result").html("<div style='text-align:center'>请准确和完整输入数字(每个数字限5位数以内)</div>"); 
			}
		})
	
		
	})
	
	
	function QuYuShu(Shu,Chu)  //取余数
	{
		if(parseInt(Shu)>Chu)
		{
			if((parseInt(Shu) % Chu)>0)
			   {  Shu=parseInt(Shu) % Chu; }
			else
			   {  Shu=parseInt(Shu)/Chu  }
		}
		
		if(parseInt(Shu)>Chu) {QuYuShu(Shu,Chu)}
		return Shu;
	}
	
	function ReplaceYao(str) //动爻 阴爻变阳爻  阳爻变阴爻
	{
		if(str.indexOf("0.png")>=0)
		{
			str=str.replace("0.png","1.png");
		}
		else
		{
			str=str.replace("1.png","0.png");
		}
		return str;
	}
	
	
</script>
</html>
